/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/29
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    TouchableOpacity,
} from 'react-native';

import CenterCommView from './CMECenterCommView';


import homeDataDay5 from '../../../LocalData/XMG_Home_D5.json';

export default class HomeShopCenterView extends Component {

    static defaultProps = {
        pop2Home: null,
    };

    render() {
        return (
            <View style={styles.pageViewStyle}>
                <CenterCommView
                    leftIon="gw"
                    leftText="购物中心"
                    rightText={homeDataDay5.tips}
                />

                <ScrollView
                    horizontal={true}
                    style={styles.scrollViewStyle}
                    showsHorizontalScrollIndicator={false}
                >
                    {this.renderBottomItems()}
                </ScrollView>
            </View>
        );
    }

    renderBottomItems() {
        let itemArr = [];

        let dataArr = homeDataDay5.data;
        for (let i = 0; i < dataArr.length; i++) {
            let data = dataArr[i];
            itemArr.push(
                <ShopCenterCell
                    key={i}
                    shopIcon={data.img}
                    shopSale={data.showtext.text}
                    shopName={data.name}
                    detailUrl={data.detailurl}
                    pop2HomeShopCenterView={(detailUrl)=>this.callback2PrePage(detailUrl)}
                />
            );
        }

        return itemArr;
    }

    callback2PrePage(detailUrl) {
        if (null == this.props.pop2Home) {
            return;
        }

        this.props.pop2Home(detailUrl);
    }
}


class ShopCenterCell extends Component {
    static defaultProps = {
        shopIcon: '',
        shopSale: '',
        shopName: '',
        detailUrl: '',
        pop2HomeShopCenterView: null,
    };

    render() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={()=>this.clickCell({
                        title: this.props.shopName,
                        detailUrl: this.props.detailUrl,
                    })}
            >
                <View style={styles.bottomCellStyle}>
                    <Image source={{uri: this.props.shopIcon}} style={styles.shopIconStyle}/>
                    <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
                    <Text style={styles.shopNameStyle}>{this.props.shopName}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    clickCell(detailUrl) {
        if (null == this.props.pop2HomeShopCenterView) {
            return;
        }
        this.props.pop2HomeShopCenterView(detailUrl);
    }

}

const styles = StyleSheet.create({
    pageViewStyle: {
        marginTop: 15,
        backgroundColor: '#fff',
    },

    scrollViewStyle: {
        flexDirection: 'row',
    },

    bottomCellStyle: {
        margin: 8,
    },

    shopIconStyle: {
        width: 120,
        height: 100,
        borderRadius: 4,
    },

    shopSaleStyle: {
        //绝对定位
        position: 'absolute',
        left: 0,
        bottom: 30,
        backgroundColor: 'orange',
        color: '#fff',
        padding: 3,
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
    },

    shopNameStyle: {
        textAlign: 'center',
        marginTop: 5,
    },
});